import React, { memo, useEffect, useState } from 'react'

import { ProductCard, SubmitBar, NavBar, Stepper, Button } from 'react-vant';
import { Delete } from '@react-vant/icons';
import { Dialog, Notify, Checkbox } from 'react-vant'
import { getData } from './Api/getList'
const App = memo(() => {

  // 定义接收数据的数组 
  const [list, setList] = useState([])
  // 定义接收数据的函数
  const getCars = async () => {
    const res = await getData()
    setList(res.data)
  }
  // 发送axios获取数据 
  useEffect(() => {
    // axios.get('http://localhost:3000/cars').then(res => {
    //   setList(res.data)
    // })
    getCars()
  }, [])
  // 商品数量加1
  function addNum(id, v) {
    list.find(item => item.id === id).num = v + 1
    setList([...list])
  }
  // 商品数量减1
  function delNum(id, v) {
    if (v <= 1) {
      let newList = list.filter(item => item.id !== id)
      setList([...newList])
    }
    else {
      list.find(item => item.id === id).num = v - 1
      setList([...list])
    }
  }
  // 计算总价格
  const sumPrice = list.reduce((pre, item) => {
    if (item.isDone) {
      pre += item.price * item.num
    }
    return pre
  }, 0)

  // 删除商品
  function delOne(id) {
    let item = list.find(item => item.id === id)
    if (!item.isDone) {
      Notify.show({ type: 'success', message: '请勾选需要删除的商品' })
    }
    if (item.isDone) {
      Dialog.confirm({
        title: '删除',
        message: '确定要删除商品吗',
      })
        .then(() => {
          let newList = list.filter(item => item.id !== id)
          setList([...newList])
          Notify.show({ type: 'warning', message: '删除成功' })
        })
        .catch(() => {
          Notify.show({ type: 'warning', message: '已取消' })
        })
    }

  }
  // 全选商品
  function checkAll(v) {
    list.map(item => {
      item.isDone = v
      return item
    })
    setList([...list])
  }
  // 单选商品 
  function checkOne(id) {
    list.map(item => {
      if (item.id === id) {
        item.isDone = !item.isDone
      }
      return item
    })
    setList([...list])
  }
  return (
    // 渲染数据 
    <div>
      <div>
        <NavBar
          title="购物车"
          leftText=""
        />
      </div>
      {list.map((item, index) => {
        return <div key={index}>

          <ProductCard
            price={item.price}

            title={item.name}
            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"

            footer={
              <>
                <Checkbox checked={item.isDone} onChange={() => checkOne(item.id)}>

                </Checkbox>
                <Stepper
                  value={item.num}
                  onChange={val => item.num < val ? addNum(item.id, item.num) : delNum(item.id, item.num)}
                  theme='round'
                  buttonSize='22'
                  disableInput
                />

                <Button icon={<Delete />} type='primary' size='mini' color='linear-gradient(to right, #ff6034, #ee0a24)' onClick={() => delOne(item.id)} />
              </>
            }
          ></ProductCard>
        </div>
      })}

      <div className="demo-submit-bar">

        <SubmitBar price={sumPrice * 100} buttonText="提交订单">
          <Checkbox checked={list.every(item => item.isDone)} onChange={(v) => checkAll(v)}>
            全选商品
          </Checkbox>
        </SubmitBar>

      </div>

    </div>
  )
})

export default App